<!--
 * @Author: 医生咨询界面
 * @Date: 2022-04-18 20:04:01
 * @LastEditTime: 2022-05-17 18:44:04
 * @LastEditors: weidelong weidelong@szkingdom.com
-->
<template>
  <div class="container">
    <van-overlay :show="show">
        <van-loading />
    </van-overlay>
    <van-nav-bar
      left-text="返回"
      :title="title"
      left-arrow
      @click-left="back"
    />
    <div class="main" ref="messgaeContent">
      <template v-for="(list, index) in msgList" :key="index">
        <div v-if="(list.receiver==userInfo.name) && userInfo.name=='默认群聊'">
          <p :class="{'right':msg.type=='my'}" v-for="(msg, index) in list.list" :key="index">
              <van-image round width="2.4em" height="2.4em" v-if="msg.type=='user'" :src='list.senderimg'></van-image>
              <van-image round width="2.4em" height="2.4em" v-if="msg.type=='my'" :src='list.senderimg' style="float:right;"></van-image>
              <span class="content">{{ list.msg }}</span>
          </p>
        </div>
        <template v-else>
          <div v-if="((list.receiver==myInfo.name)&&(list.sender==userInfo.name))||((list.receiver==userInfo.name)&&(list.sender==myInfo.name))">
            <p :class="{'right':list.type=='my'}">
                <van-image round width="2.4em" height="2.4em" v-if="list.type=='user'" :src='list.senderimg'></van-image>
                <van-image round width="2.4em" height="2.4em" v-if="list.type=='my'" :src='list.senderimg' style="float:right;"></van-image>
                <span class="content">{{ list.msg }}</span>
            </p>
          </div>
        </template>
      </template>

    </div>
    <van-cell-group inset class="shuru">
      <van-field
        v-model="message"
        rows="1"
        autosize
        autofocus
        type="textarea"
        placeholder="请输入留言"
      >
        <template #button>
          <van-button size="small" type="primary" @click="send" :disabled='isDisabled'>发送</van-button>
        </template>
      </van-field>
    </van-cell-group>
  </div>
</template>

<script>

import { saveDoctorMsg, getDoctorMsg, saveUserMsg, getUserMsg } from '../../request/api/consultApi'
import { getCurrentTime } from '../../utils/index'

export default {
  name: "interactive",
  data() {
    return {
      title: '医师',
      isDisabled: false,
      myImg: JSON.parse(sessionStorage.getItem('user')).img,
      message: '',
      messageHeight: { 
        maxHeight: 100, 
        minHeight: 50
      },
      doctorState: 'false',
      doctormsg: [], //医师端的聊天记录
      show: false
    }
  },
  computed: {
        tableData() {
            return this.$store.state.userList
        },
        myInfo() {
            return this.$store.state.myInfo
        },
        userInfo() {
            return this.$store.state.userInfo
        },
        chatType() {
            return this.$store.state.chatType
        },
        msgList() {
            return this.$store.state.chatMessageList
        }
    },
  watch: {
    // 输入框内容为空时 禁用按钮
    message(newVal, oldVal) {
      if (newVal) {
        this.isDisabled = false
      } else if (newVal === '') {
        this.isDisabled = true
      }
    }
  },
  created() {
    // 连接socket
    this.$socket.connect()
    this.$socket.emit('login', { name: JSON.parse(sessionStorage.getItem('user')).name, img: JSON.parse(sessionStorage.getItem('user')).img}, (result)=>{
      if (result) {
        this.$store.commit('setMyInfo', {
            img: JSON.parse(sessionStorage.getItem('user')).img,
            name: JSON.parse(sessionStorage.getItem('user')).name
        })
      }
    })
    this.getProp()
    },
  mounted() {
      this.sockets.subscribe("updateChatMessageList", data => {
          this.$store.commit('updateChatMessageList', data)
      })
      this.sockets.subscribe("login", data => {
          this.$store.commit('socklogin', data)
      })
        // 保持滚动条置底
        this.$nextTick(() => {
            this.$refs.messgaeContent.scrollTop = this.$refs.messgaeContent.scrollHeight
        })
  },
  beforeRouteLeave() {
      console.log('离开')
  },
  methods: {
    // 返回上一级
    back() {
      history.back()
      // 断开连接
      this.$socket.disconnect()
      this.sockets.unsubscribe('updateChatMessageList');
      this.sockets.unsubscribe('login');

    },
    send(){
          // 群聊还是私聊
          if (this.chatType == 'group') {
              const data = {
                  type: 'my',
                  sender: this.myInfo.name, // 发送者
                  senderimg: this.myInfo.img,
                  receiver: '默认群聊', // 接收方
                  time: getCurrentTime(),
                  msg: this.message 
              }
              this.$socket.emit('groupChat', data)
              // 自己的信息直接push到数组中
              this.$store.commit('updateChatMessageList', data)
          } else {
              const data = {
                  type: 'my',
                  sender: this.myInfo.name, // 发送者
                  senderimg: this.myInfo.img,
                  receiver: this.userInfo.name, // 接收方
                  time: getCurrentTime(),
                  msg: this.message 
              }
              this.$socket.emit('privateChat', data)
              this.$store.commit('updateChatMessageList', data)
          }
          this.message = ""
        },
    // 获取路由传参
    getProp() {
      this.title = decodeURIComponent(this.$route.query.name)
      this.doctorState = this.$route.query.state
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  .main {
    width: 100%;
    height: 80%;
    position: absolute;
    padding: 46px 2px 0;
    box-sizing: border-box;
    margin-bottom: -50px;
    overflow-y: scroll;
    .right {    flex-direction: row-reverse;
                justify-content: end;
            }
    p {
      margin-bottom: 12px;
      box-sizing: border-box;
      display: flex;
      .van-image {
        margin: 0 8px;
        flex-shrink: 0;
        ::v-deep img {
          width: 100%;
          height: 100%;
        }
      }
      span {
        padding: 6px 10px;
        margin: 0 6px;
        display: flex;
        justify-content: center; //水平
        align-items: center; //垂直
        border-radius: 6px;
        background: #ecf0f3;
        word-break: break-all;
        word-wrap: break-word;
      }
    }
    .active {
      flex-direction: row-reverse;
    }
  }
  .shuru {
    height: 20%;
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: -50px;
    border-top: 1px solid gainsboro;
    margin: 0;
    .van-field {
      margin: 0;
      padding: 10px;
    }
  }
}
</style>
